<link class="css-loader" href="/css/login.css" rel="stylesheet"/>
<link class="css-loader" href="/css/login-style.css" rel="stylesheet"/>
<link class="css-loader" href="/css/animate-login.css" rel="stylesheet"/>
<link class="css-loader" href="/css/animate-custom.css" rel="stylesheet"/>

<div class="container">
<!-- Codrops top bar -->
<header>
    <h1>Open your timeshelf with <span>my9time</span> now!</h1>
</header>
<section>
<div class="col-xs-12">
    <center>
        <!-- oauth -->
        <!-- google -->
        <a href="/auth/google" id="oauthGoogle">
            <img height="40" width="170" src="img/oauth/google.png" style="margin-bottom:20px;display: inherit"/>
        </a>
        <!-- facebook -->
        <a href="/auth/facebook" id="oauthFacebook">
            <img height="40" width="170" src="img/oauth/facebook.png" style="margin-bottom:20px;display: inherit"/>
        </a>
    </center>
</div>
<div id="container_login">
<a class="hiddenanchor" id="toregister"></a>
<a class="hiddenanchor" id="tologin"></a>

<div id="wrapper">
<div id="login" class="animate form auth-form-animation" data-ng-hide="pageState !== 'login'">
    <form name="loginForm" novalidate mi-submit="login()" data-ng-controller="SignInController">
        <h1>Log in</h1>
        <div class="alert alert-danger error" ng-show="isLoginError">
            <span ng-bind="loginError"></span>
        </div>
        <!-- username -->
        <p>
            <label for="username" class="uname" data-icon="u">
                Your email or username
            </label>
            <input type="text" name="username" id="username" placeholder="myusername or mymail@mail.com"
                   ng-model="session.username" required mi-check-username/>
                            <span class="help-block error" ng-show="loginForm.username | shouldDisplayError:loginForm:'required'">
                                Please input your username
                            </span>
        </p>
        <!-- password -->
        <p>
            <label for="password" class="youpasswd" data-icon="p"> Your password </label>
            <input id="password" name="password" required type="password"
                   placeholder="eg. 345JB5KJ2" data-ng-model="session.password"/>
                            <span class="help-block error" ng-show="loginForm.password | shouldDisplayError:loginForm:'required'">
                    Please input your password
                            </span>
        </p>
        <p>Or <a href="#" data-ng-click="jumpToForgot()" class="to_forgot">forgot password</a>?</p>
        <!-- login button -->
        <p class="login button">
            <input type="submit" value="Login"/>
        </p>
        <!-- toggle to register -->
        <p class="change_link">
            Not a member yet ?
            <a href="" data-ng-click="jumpToRegister()" class="to_register">Register</a>
        </p>

        <!--<button type="submit" class="btn btn-primary" value="Login" title="Login">Login</button>-->
    </form>
</div>

<!-- forgot form -->
<div id="forgot" class="animate form auth-form-animation" data-ng-hide="pageState !== 'forgot'">
    <form name="forgotForm" novalidate mi-submit="submit()" data-ng-controller="RecoveryController">
        <h1>Forgot Password?</h1>
        <div data-ng-if="isSent" class="success">
            <h3>We sent information about password reset to the email address of your recovery.</h3>
            <hr/>
            <p>Check the inbox mail sent to you in <span style="color: cornflowerblue;"><i>{{info.email}}</i></span> to see the next step.</p>
        </div>
        <div data-ng-if="isError" class="error">
            <p>{{error}}</p>
        </div>
        <p data-ng-hide="isSent">
            <label for="usernameforgot" class="uname" data-icon="u"> Your username </label>
            <input id="usernameforgot" name="usernameforgot" required="required" type="text" data-ng-model="info.username"
                   placeholder="myusername"/>
                            <span class="help-block error" ng-show="forgotForm.usernameforgot|shouldDisplayError:forgotForm:'required'">
                                Please input your username
                            </span>
        </p>
        <p data-ng-hide="isSent">
            <label for="emailforgot" class="uname" data-icon="u"> Your email</label>
            <input id="emailforgot" name="emailforgot" data-ng-model="info.email" required="required" type="text"
                   placeholder="mymail@mail.com"/>
                            <span class="help-block error" ng-show="forgotForm.emailforgot|shouldDisplayError:forgotForm:'required'">
                                Please input your email
                            </span>
                            <span class="help-block error" ng-show="forgotForm.emailforgot|shouldDisplayError:forgotForm:'email'">
                                Invalid email format
                            </span>
        </p>

        <div class="loading-div" data-ng-if="isCalling">
            <i class="fa fa-spin fa-spinner fa-5x" style="margin: 220px 48%"></i>
        </div>
        <p class="forgot button" data-ng-hide="isSent">
            <input type="submit" value="Reset password" style="width: auto"/>
        </p>

        <p class="change_link">
            Wanna login?
            <a href="#" data-ng-click="jumpToLogin()" class="to_login">Login</a>
        </p>
    </form>
</div>


<!-- register form -->
<div id="register" class="animate form auth-form-animation" data-ng-hide="pageState !== 'register'">
    <form name="registerForm" novalidate mi-submit="submit()" data-ng-controller="SignUpController">
        <h1> Create timeshelf </h1>
        <div data-ng-if="isServerError" class="error">
            <p data-ng-show="serverError == 0">Something wrong just happened. Please try again.</p>
            <p data-ng-show="serverError == 1">Incorrect captcha. Please try again.</p>
            <p data-ng-show="serverError == 2">Your process is timeout. Please try again.</p>
        </div>
        <!-- first name -->
        <p>
            <label for="firstName" class="uname" data-icon="u">First name</label>
            <input id="firstName" name="firstName" required type="text"
                   placeholder="first name" data-ng-model="newUser.firstName" ng-data-value="Cái Tên"/>
                            <span class="help-block error" ng-show="registerForm.firstName | shouldDisplayError:registerForm:'required'">
                    Please input your first name
                            </span>
        </p>
        <!-- last name -->
        <p>
            <label for="lastName" class="uname" data-icon="u">Last name</label>
            <input id="lastName" name="lastName" required type="text"
                   placeholder="last name" data-ng-model="newUser.lastName" value="Là Một"/>
                            <span class="help-block error" ng-show="registerForm.lastName | shouldDisplayError:registerForm:'required'">
                    Please input your last name
                            </span>
        </p>
        <!-- username -->
        <p>
            <label for="usernamesignup" class="uname" data-icon="u">Username</label>
                            <span ng-show="!registerForm.usernamesignup.$invalid && registerForm.usernamesignup.$dirty">
                    <i class="fa fa-check-circle-o" style="color:#4cae4c"></i></span>
            <input id="usernamesignup" name="usernamesignup" required type="text"
                   placeholder="username1992" ng-minlength="6" ng-maxlength="10" data-ng-model="newUser.username"
                   ng-pattern="/^[a-zA-Z_0-9]*$/" mi-check-unique value="la1caiten"/>
                            <span class="help-block error" ng-show="registerForm.usernamesignup | shouldDisplayError:registerForm:'min'">
            Your username must have more than 6 characters
        </span>
            <span class="help-block error" ng-show="registerForm.usernamesignup | shouldDisplayError:registerForm:'max'">
            Your username must have less than 10 characters
        </span>
        <span class="help-block error" ng-show="registerForm.usernamesignup | shouldDisplayError:registerForm:'unique'">
            Someone has used this username, please try another
        </span>
        <span class="help-block error" ng-show="registerForm.usernamesignup | shouldDisplayError:registerForm:'pattern'">
            Username can not contain special characters excepts '_'
        </span>
                            <span class="help-block error" ng-show="registerForm.usernamesignup | shouldDisplayError:registerForm:'required'">
                    Please input your username
                            </span>
        </p>
        <!-- email -->
        <p>
            <label for="emailsignup" class="youmail" data-icon="e">Email</label>
                            <span ng-show="!registerForm.emailsignup.$invalid && registerForm.emailsignup.$dirty">
                    <i class="fa fa-check-circle-o" style="color:#4cae4c"></i>
                </span>
            <input id="emailsignup" name="emailsignup" required type="text"
                   placeholder="mymail@mail.com" data-ng-model="newUser.email" ng-pattern="/^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*$/i" mi-check-unique value="la1caiten@gmail.com"/>
                            <span class="help-block error" ng-show="registerForm.emailsignup | shouldDisplayError:registerForm:'pattern'">
            Invalid email format
        </span>
        <span class="help-block error" ng-show="registerForm.emailsignup | shouldDisplayError:registerForm:'unique'">
            This email address has been used. If you forgot your account, recover it <a href="#" data-ng-click="jumpToForgot()">here</a> or just <a href="/login">sign in</a>
        </span>
                            <span class="help-block error" ng-show="registerForm.emailsignup | shouldDisplayError:registerForm:'required'">
                    Please input your email
                            </span>
        </p>
        <!-- password -->
        <p>
            <label for="passwordsignup" class="youpasswd" data-icon="p">Password </label>
            <input id="passwordsignup" name="passwordsignup" required type="password"
                   placeholder="eg. 345JB5KJ2" ng-minlength="6" data-ng-model="newUser.password" value="123456"/>
                            <span class="help-block error" ng-show="registerForm.passwordsignup | shouldDisplayError:registerForm:'min'">
            Your password must have more than 6 characters
        </span>
                            <span class="help-block error" ng-show="registerForm.passwordsignup | shouldDisplayError:registerForm:'required'">
                    Please input your password
                            </span>
        </p>
        <!-- confirm password -->
        <p>
            <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your
                password </label>
            <input id="passwordsignup_confirm" name="passwordsignup_confirm" required
                   type="password" placeholder="eg. 345JB5KJ2" data-ng-model="newUser.passwordConfirm" value="123456"/>
                            <span class="help-block error" ng-show="isMatch() && registerForm.passwordsignup_confirm.$dirty && registerForm.passwordsignup_confirm.$dirty">
                    Your password doesn't match
                </span>
                            <span class="help-block error" ng-show="registerForm.passwordsignup_confirm | shouldDisplayError:registerForm:'required'">
                    Please confirm your password
                            </span>
        </p>
        <!-- birthday -->
        <p>
            <label>Birhday</label><br/>
            <label for="date" ng-class="{'has-error':(registerForm.date | shouldDisplayError:registerForm)}">Date
                <select id="date" data-ng-init='newUser.date = default.dates[0]' ng-options="date for date in default.dates" name="date" class="form-control" ng-model="newUser.date" mi-date-valid/>
                <option value="">-- date --</option>
                </select>
            </label>
            <label for="month" data-ng-init='newUser.month = default.months[0]' ng-class="{'has-error':(registerForm.month | shouldDisplayError:registerForm)}">Month
                <select id="month" ng-options="month for month in default.months" name="month" class="form-control" ng-model="newUser.month" mi-date-valid/>
                <option value="">-- month --</option>
                </select>
            </label>
            <label for="year" data-ng-init='newUser.year = default.years[0]' ng-class="{'has-error':(registerForm.year | shouldDisplayError:registerForm)}">Year
                <select id="year" ng-options="year for year in default.years" name="year" class="form-control" ng-model="newUser.year" mi-date-valid/>
                <option value="">-- year --</option>
                </select>
            </label>
        </p>
        <p>
                            <span class="help-block error" ng-show="registerForm.date | shouldDisplayError:registerForm:'datevalid'">
            Date invalid
        </span>
        </p>
        <!-- gender -->
        <p>
            <label>
                <input type="radio" name="gender" value="male" class="form-control" checked ng-model="newUser.gender"/>Male
            </label>
            <label>
                <input type="radio" name="gender" value="female" class="form-control" ng-model="newUser.gender"/>Female
            </label>
        </p>
        <!-- captcha -->
        <p>
            <div
                    vc-recaptcha
                    ng-model="newUser.captcha"
                    tabindex="12"
                    theme="white"
                    lang="en"
                    key="6LehqfESAAAAAHodY0j5z6hq_B7Xdi6Kpc0Yb7cL"
                    ></div>
        </p>
        <!-- button -->
        <a href="" onclick="window.open('/termandcondition', 'newwindow', 'width=900, height=680'); return false;"> Term and Condition</a>
        <p class="signin button">
            <input type="submit" value="Sign up"/>
        </p>

        <p class="change_link">
            Already have your timeshelf?
            <a href="" data-ng-click="jumpToLogin()" class="to_register"> Go and log in </a>
        </p>
    </form>
</div>
</div>
</div>
</section>
</div>

<div class="modal fade in" id="term" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="false" style="display:none;" data-ng-controller="HomepageController">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
                This agreement was written in English (US). To the extent any translated version of this agreement conflicts with the English version, the English version controls.  Please note that Section 17 contains certain changes to the general terms for users outside the United States.

                Date of Last Revision: November 15, 2013.

                Statement of Rights and Responsibilities

                This Statement of Rights and Responsibilities ("Statement," "Terms," or "SRR") derives from the My9Time Principles, and is our terms of service that governs our relationship with users and others who interact with My9Time. By using or accessing My9Time, you agree to this Statement, as updated from time to time in accordance with Section 14 below. Additionally, you will find resources at the end of this document that help you understand how My9Time works.
                <p><b>Privacy</b></p>
                Your privacy is very important to us. We designed our Data Use Policy to make important disclosures about how you can use My9Time to share with others and how we collect and can use your content and information.  We encourage you to read the Data Use Policy, and to use it to help you make informed decisions.
                </br>
                <p><b>Sharing Your Content and Information</b></p>

                You own all of the content and information you post on My9Time, and you can control how it is shared through your privacy and application settings. In addition:
                For content that is covered by intellectual property rights, like photos and videos (IP content), you specifically give us the following permission, subject to your privacy and application settings: you grant us a non-exclusive, transferable, sub-licensable, royalty-free, worldwide license to use any IP content that you post on or in connection with My9Time (IP License). This IP License ends when you delete your IP content or your account unless your content has been shared with others, and they have not deleted it.
                When you delete IP content, it is deleted in a manner similar to emptying the recycle bin on a computer. However, you understand that removed content may persist in backup copies for a reasonable period of time (but will not be available to others).
                When you use an application, the application may ask for your permission to access your content and information as well as content and information that others have shared with you.  We require applications to respect your privacy, and your agreement with that application will control how the application can use, store, and transfer that content and information.  (To learn more about Platform, including how you can control what information other people may share with applications, read our Data Use Policy and Platform Page.)
                When you publish content or information using the Public setting, it means that you are allowing everyone, including people off of My9Time, to access and use that information, and to associate it with you (i.e., your name and profile picture).
                We always appreciate your feedback or other suggestions about My9Time, but you understand that we may use them without any obligation to compensate you for them (just as you have no obligation to offer them).

                </br>

                <p><b>Safety</b></p>
                We do our best to keep My9Time safe, but we cannot guarantee it. We need your help to keep My9Time safe, which includes the following commitments by you:
                You will not post unauthorized commercial communications (such as spam) on My9Time.
                You will not collect users' content or information, or otherwise access My9Time, using automated means (such as harvesting bots, robots, spiders, or scrapers) without our prior permission.
                You will not engage in unlawful multi-level marketing, such as a pyramid scheme, on My9Time.
                You will not upload viruses or other malicious code.
                You will not solicit login information or access an account belonging to someone else.
                You will not bully, intimidate, or harass any user.
                You will not post content that: is hate speech, threatening, or pornographic; incites violence; or contains nudity or graphic or gratuitous violence.
                You will not develop or operate a third-party application containing alcohol-related, dating or other mature content (including advertisements) without appropriate age-based restrictions.
                You will follow our Promotions Guidelines and all applicable laws if you publicize or offer any contest, giveaway, or sweepstakes (“promotion”) on My9Time.
                You will not use My9Time to do anything unlawful, misleading, malicious, or discriminatory.
                You will not do anything that could disable, overburden, or impair the proper working or appearance of My9Time, such as a denial of service attack or interference with page rendering or other My9Time functionality.
                You will not facilitate or encourage any violations of this Statement or our policies.
                </br>

                <p><b>Registration and Account Security</b></p>
                My9Time users provide their real names and information, and we need your help to keep it that way. Here are some commitments you make to us relating to registering and maintaining the security of your account:
                You will not provide any false personal information on My9Time, or create an account for anyone other than yourself without permission.
                You will not create more than one personal account.
                If we disable your account, you will not create another one without our permission.
                You will not use your personal timeline primarily for your own commercial gain, and will use a My9Time Page for such purposes.
                You will not use My9Time if you are under 13.
                You will not use My9Time if you are a convicted sex offender.
                You will keep your contact information accurate and up-to-date.
                You will not share your password (or in the case of developers, your secret key), let anyone else access your account, or do anything else that might jeopardize the security of your account.
                You will not transfer your account (including any Page or application you administer) to anyone without first getting our written permission.
                If you select a username or similar identifier for your account or Page, we reserve the right to remove or reclaim it if we believe it is appropriate (such as when a trademark owner complains about a username that does not closely relate to a user's actual name).
                </br>

                <p><b>Protecting Other People's Rights</b></p>
                We respect other people's rights, and expect you to do the same.
                You will not post content or take any action on My9Time that infringes or violates someone else's rights or otherwise violates the law.
                We can remove any content or information you post on My9Time if we believe that it violates this Statement or our policies.
                We provide you with tools to help you protect your intellectual property rights. To learn more, visit our How to Report Claims of Intellectual Property Infringement page.
                If we remove your content for infringing someone else's copyright, and you believe we removed it by mistake, we will provide you with an opportunity to appeal.
                If you repeatedly infringe other people's intellectual property rights, we will disable your account when appropriate.
                You will not use our copyrights or trademarks (including My9Time, the My9Time and F Logos, FB, Face, Poke, Book and Wall), or any confusingly similar marks, except as expressly permitted by our Brand Usage Guidelines or with our prior written permission.
                If you collect information from users, you will: obtain their consent, make it clear you (and not My9Time) are the one collecting their information, and post a privacy policy explaining what information you collect and how you will use it.
                You will not post anyone's identification documents or sensitive financial information on My9Time.
                You will not tag users or send email invitations to non-users without their consent. My9Time offers social reporting tools to enable users to provide feedback about tagging.
                </br>

                <p><b>Mobile and Other Devices</b></p>
                We currently provide our mobile services for free, but please be aware that your carrier's normal rates and fees, such as text messaging and data charges, will still apply.
                In the event you change or deactivate your mobile telephone number, you will update your account information on My9Time within 48 hours to ensure that your messages are not sent to the person who acquires your old number.
                You provide consent and all rights necessary to enable users to sync (including through an application) their devices with any information that is visible to them on My9Time.
                </br>

                <p><b>Payments</b></p>
                If you make a payment on My9Time or use My9Time Credits, you agree to our Payments Terms.


            </div>
        </div>
    </div>
</div>

<div class="tdl-spmenu tdl-spmenu-vertical tdl-spmenu-right" id="about">
    <form action="/aboutUs">
    <button type="submit" href="/aboutUs"><div id="btn" title="Let us introduce ourshelves!"></div></button>
    </form>
</div>

<script>
    $('#oauthGoogle').on('click',function(){
        window.location.replace('/auth/google');
    });
    $('#oauthFacebook').on('click',function(){
        window.location.replace('/auth/facebook');
    });

    removejscssfile("css/bootstrap/bootstrap.css", "css")

</script>

